<template>
  <div class="menu-container">
    <div class="menu-header">
      <el-button type="primary" @click="handleAdd(null)">
        <el-icon><Plus /></el-icon>新增菜单
      </el-button>
    </div>

    <div class="menu-content">
      <el-table
        :data="menuList"
        row-key="id"
        :tree-props="{ children: 'children' }"
        style="width: 100%"
      >
        <el-table-column prop="title" label="菜单名称" min-width="180">
          <template #default="{ row }">
            <el-icon v-if="row.meta?.icon"><component :is="row.meta.icon" /></el-icon>
            <span style="margin-left: 8px">{{ row.meta?.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由路径" min-width="180" />
        <el-table-column prop="name" label="路由名称" width="180" />
        <el-table-column prop="component" label="组件路径" min-width="180" />
        <el-table-column prop="sort" label="排序" width="80" align="center" />
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.hidden ? 'info' : 'success'">
              {{ row.hidden ? '隐藏' : '显示' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleAdd(row)">
              新增
            </el-button>
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 菜单表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="formType === 'add' ? '新增菜单' : '编辑菜单'"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="上级菜单">
          <el-tree-select
            v-model="formData.parentId"
            :data="menuOptions"
            :props="{ label: 'title', value: 'id', children: 'children' }"
            placeholder="请选择上级菜单"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="formData.meta.title" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="formData.meta.icon" placeholder="请选择菜单图标">
            <el-option
              v-for="icon in iconList"
              :key="icon"
              :label="icon"
              :value="icon"
            >
              <el-icon><component :is="icon" /></el-icon>
              <span style="margin-left: 8px">{{ icon }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由路径" prop="path">
          <el-input v-model="formData.path" placeholder="请输入路由路径" />
        </el-form-item>
        <el-form-item label="路由名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入路由名称" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="formData.component" placeholder="请输入组件路径" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-switch v-model="formData.hidden" active-text="隐藏" inactive-text="显示" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 菜单列表数据
const menuList = ref([
  {
    id: 1,
    path: '/dashboard',
    name: 'Dashboard',
    component: '@/views/dashboard/index.vue',
    meta: { 
      title: '控制台',
      icon: 'DataBoard'
    },
    sort: 1
  },
  {
    id: 2,
    path: '/system',
    name: 'System',
    component: '@/views/system/index.vue',
    meta: { 
      title: '系统管理',
      icon: 'Setting'
    },
    sort: 2,
    children: [
      {
        id: 21,
        path: 'user',
        name: 'SystemUser',
        component: '@/views/system/user/index.vue',
        meta: { 
          title: '用户管理',
          icon: 'User'
        },
        sort: 1
      },
      {
        id: 22,
        path: 'role',
        name: 'SystemRole',
        component: '@/views/system/role/index.vue',
        meta: { 
          title: '角色管理',
          icon: 'UserFilled'
        },
        sort: 2
      },
      {
        id: 23,
        path: 'menu',
        name: 'SystemMenu',
        component: '@/views/system/menu/index.vue',
        meta: { 
          title: '菜单管理',
          icon: 'Menu'
        },
        sort: 3
      }
    ]
  }
])

// 可选的图标列表
const iconList = [
  'DataBoard',
  'Setting',
  'User',
  'UserFilled',
  'Menu',
  'Shop',
  'List'
]

// 表单相关
const dialogVisible = ref(false)
const formType = ref('add') // add or edit
const formRef = ref(null)
const formData = ref({
  parentId: null,
  path: '',
  name: '',
  component: '',
  meta: {
    title: '',
    icon: ''
  },
  sort: 0,
  hidden: false
})

// 表单校验规则
const formRules = {
  'meta.title': [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }
  ],
  path: [
    { required: true, message: '请输入路由路径', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入路由名称', trigger: 'blur' }
  ]
}

// 菜单树选项
const menuOptions = ref([
  {
    id: 0,
    title: '顶级菜单',
    children: menuList.value
  }
])

// 新增菜单
const handleAdd = (row) => {
  formType.value = 'add'
  formData.value = {
    parentId: row?.id || null,
    path: '',
    name: '',
    component: '',
    meta: {
      title: '',
      icon: ''
    },
    sort: 0,
    hidden: false
  }
  dialogVisible.value = true
}

// 编辑菜单
const handleEdit = (row) => {
  formType.value = 'edit'
  formData.value = {
    ...row,
    parentId: row.parentId || null
  }
  dialogVisible.value = true
}

// 删除菜单
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该菜单吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 调用删除接口
    ElMessage.success('删除成功')
  })
}

// 提交表单
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      // TODO: 调用保存接口
      ElMessage.success(formType.value === 'add' ? '新增成功' : '修改成功')
      dialogVisible.value = false
    }
  })
}
</script>

<style scoped>
.menu-container {
  padding: 20px;
}

.menu-header {
  margin-bottom: 20px;
}

.menu-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-tree-select) {
  width: 100%;
}

:deep(.el-select-dropdown__item) {
  display: flex;
  align-items: center;
}
</style> 